<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户-我喜欢-歌单</title>
		<script src="../../../../js/vue.js"></script>
		<script src="../../../../js/element.js"></script>
		<script src="../../../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../../../css/menus/mySong/love/album.css" />
	</head>
	<body>
		<div id="app">
			<!-- 歌手专辑列表 -->
			<div class="albumList">
				<div class="album" v-for="(sheet, index) in sheetList">
					<div class="albumImg" >
						<img :src="sheet.img"
							alt="" >
						<div class="mask" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)" @click="mouseClick(sheet.id)">
							<i class="iconfont icon-24gf-playCircle"></i>
						</div>
					</div>
					<div class="albumName" @click="mouseClick(sheet.id)">{{sheet.name}}</div>
					<div class="albumReleaseTime">
						<span v-for="user in sheet.userList" @click="toUser(user.id)">
							{{user.nickName}}
						</span>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					sheetList: '', //专辑信息
					currentIndex: -1, //当前正在播放的歌曲下标，-1 还没有开始播放
				}
			},
			mounted() { // 生命周期函数
				// this.getFatherInfo()
				// window.getAlbumCurrentIndex = this.getAlbumCurrentIndex
				this.getLoveSong()
				window.getMySongCurrentIndex = this.getMySongCurrentIndex
			},
			methods: {
				// 获取用户我喜欢的专辑
				getLoveSong() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getLove/3',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.sheetList = res.data.data.sheetList
							// 将数据发送给子页面
							// 这里需要暴露给全局，这样的话，子页面才能调用相对应的方法
							// window.toChildData = this.album
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				// 鼠标移入，图片上移
				mouseOver(index){
					console.log('鼠标移入')
					const imgDocument = document.querySelectorAll('.albumImg img')
					imgDocument[index].style.transform = 'translateY(-10px)'
				},
				// 鼠标移出，图片下移
				mouseLeave(index){
					console.log('鼠标移出')
					const imgDocument = document.querySelectorAll('.albumImg img')
					imgDocument[index].style.transform = 'translateY(0px)'
				},
				// 鼠标点击 去歌单页面
				mouseClick(id){
					const topHtml =  window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'sheet/sheet.html?id='+id)
				},
				// 去用户页面
				toUser(id){
					
				}
			},
		})
	</script>
</html>